<template>
  <div class="product-function w-100P">
    <div class="normal-height">
      <TableCard
        title="产品属性"
        :table-set="{ columns: attrCol, tableData: attrData, actionBar: false }"
        @pageChange="handleAttrPageChange"
      />
    </div>
    <div class="normal-height mg-top-20 ">
      <TableCard
        title="产品服务"
        :table-set="{
        columns: serverCol,
        tableData: serverData,
        actionBar: false
      }"
        @pageChange="handleServicePageChange"
      />
    </div>
    <div class="normal-height mg-top-20 ">
      <TableCard
        title="产品事件"
        :table-set="{
        columns: eventCol,
        tableData: eventData,
        actionBar: false
      }"
        @pageChange="handleEventPageChange"
      />
    </div>
  </div>
</template>

<script>
import TableCard from '@/components/table-card/index'
import {
  apiFindPropertyListByMetadataId,
  apiFindServiceListByMetadataId,
  findIotEventPageByParam,
} from '@/views/device/create-product/api'
import { MAX_INTEGER } from '@/consts'

export default {
  name: 'ProductFunction',
  components: { TableCard },
  props: {
    metadataId: { type: String, required: true },
  },
  data() {
    return {
      attrData: [],
      serverData: [],
      eventData: [],
    }
  },
  computed: {
    attrCol() {
      return [
        { label: '属性名称', prop: 'name' },
        { label: '标识符', prop: 'property' },
        { label: '参数类型', prop: 'typeName' },
        { label: '属性说明', prop: 'remark' },
      ]
    },
    serverCol() {
      return [
        { label: '服务名称', prop: 'name' },
        { label: '标识符', prop: 'identifier' },
        { label: '服务说明', prop: 'remark' },
      ]
    },
    eventCol() {
      return [
        { label: '事件名称', prop: 'name' },
        { label: '标识符', prop: 'identifier' },
        { label: '事件类型', prop: 'dataStatusName' },
        { label: '事件说明', prop: 'remark' },
      ]
    },
  },
  watch: {
    // metadataId: {
    //   immediate: true,
    //   handler() {
    //     this.initData()
    //   },
    // },
  },
  created() {
    this.initData()
  },
  mounted() {},
  methods: {
    async initData() {
      await this.findPropertyListByMetadataId()
      await this.findServiceListByMetadataId()
      await this.findEventListByMetadataId()
    },
    async findPropertyListByMetadataId() {
      const records = await apiFindPropertyListByMetadataId(this.metadataId)
      records.forEach(item => {
        switch (item.type) {
          case 'STRING':
            item.typeName = '字符串'
            break
          case 'FLOAT':
            item.typeName = '浮点数'
            break
          case 'LONG':
            item.typeName = '长整数 '
            break
          default:
            break
        }
      })
      this.attrData = records
    },
    async findEventListByMetadataId() {
      const page = { metadataId: this.metadataId, pageNo: 1, pageSize: MAX_INTEGER }
      const { records } = await findIotEventPageByParam(page)
      console.log(records)
      this.eventData = records
      // const res = await findIotEventPageByParam(page)
      // console.log(res)
    },
    async findServiceListByMetadataId() {
      this.serverData = await apiFindServiceListByMetadataId(this.metadataId)
    },
    handleAttrPageChange(page) {
      // 暂时没有分页
    },
    handleEventPageChange(page) {
      // 暂时没有分页
    },
    handleServicePageChange(page) {
      // 暂时没有分页
    },
  },
}
</script>

<style scoped>
.product-function {
  height: 100%;
  overflow: auto;
}
.normal-height {
  height: 282px;
}
</style>
